---
title: Table
icon: Table
---

<MetaData
  lang="en-US"
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-table',
      locale: '@univerjs/preset-sheets-table/locales/en-US',
      style: '@univerjs/preset-sheets-table/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs/sheets-table',
      facade: '@univerjs/sheets-table/facade',
    }, {
      client: '@univerjs/sheets-table-ui',
      locale: '@univerjs/sheets-table-ui/locale/en-US',
      style: '@univerjs/sheets-table-ui/lib/index.css',
    }],
    server: 'No',
  }}
/>

The Table feature allows users to create and manage tables in spreadsheets for better organization and presentation of data. It supports various table styles and operations, helping users quickly process and analyze information.

## Preset Mode

### Installation

```package-install
npm install @univerjs/preset-sheets-table
```

### Usage

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsTablePreset } from '@univerjs/preset-sheets-table' // [!code ++]
import UniverPresetSheetsTableEnUS from '@univerjs/preset-sheets-table/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-table/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsTableEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsTablePreset(), // [!code ++]
  ],
})
```

{/* ### Presets and Configuration */}

## Plugin Mode

### Installation

```package-install
npm install @univerjs/sheets-table @univerjs/sheets-table-ui
```

### Usage

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsTablePlugin } from '@univerjs/sheets-table' // [!code ++]
import { UniverSheetsTableUIPlugin } from '@univerjs/sheets-table-ui' // [!code ++]
import SheetsTableUIEnUS from '@univerjs/sheets-table-ui/locale/en-US' // [!code ++]

import '@univerjs/sheets-table-ui/lib/index.css' // [!code ++]

import '@univerjs/sheets-table/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsTableUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsTablePlugin) // [!code ++]
univer.registerPlugin(UniverSheetsTableUIPlugin) // [!code ++]
```

{/* ### Plugins and Configuration */}

## Facade API

Complete Facade API type definitions can be found in the [FacadeAPI](https://reference.univer.ai/en-US).。

### Insert Table

- `FWorkbook.addTable`: Insert a table in the specified worksheet of the workbook
- `FWorksheet.addTable`: Insert a table in the worksheet

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
    columns: [
      { id: 'col-1', displayName: 'Column 1' },
    ],
    filters: [
      {
        filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,
        filterInfo: {
          conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,
          compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,
          expectedValue: 2,
        },
      },
    ],
  },
)

if (success) {
  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

### Get Table

- `FWorkbook.getTableList`: Get all table lists in the workbook
- `FWorksheet.getSubTableInfos`: Get all table lists in the worksheet

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const tables = fWorkbook.getTableList()
console.log('debugger tables', tables)
```

- `FWorkbook.getTableInfo`: Get table information by table ID
- `FWorkbook.getTableInfoByName`: Get table information by table name

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

- `FWorksheet.getTableByCell`: Get table information by cell position

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

const cellB2 = fWorksheet.getRange('B2')
const row = cellB2.getRow()
const column = cellB2.getColumn()
console.log('debugger tableInfo', fWorksheet.getTableByCell(row, column))

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)
console.log('debugger tableInfo2', fWorksheet.getTableByCell(row, column))
```

### Set Filter

- `FWorkbook.setTableFilter`: Set the filter for the table in the workbook
- `FWorksheet.setTableFilter`: Set the filter for the table in the worksheet

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  // Set the filter for the second column
  await fWorksheet.setTableFilter('id-1', 1, {
    filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,
    filterInfo: {
      conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,
      compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,
      expectedValue: 10,
    },
  })

  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

- `FWorksheet.resetFilter`: Reset the filter for the table in the worksheet

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  // Set the filter for the second column
  await fWorksheet.setTableFilter('id-1', 1, {
    filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,
    filterInfo: {
      conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,
      compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,
      expectedValue: 10,
    },
  })

  // Reset the filter for the second column after 3 seconds
  setTimeout(async () => {
    await fWorksheet.resetFilter('id-1', 1)
  }, 3000)

  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

### Modify/Delete Table

- `FWorkbook.removeTable`: Remove the table in the workbook
- `FWorksheet.removeTable`: Remove the table in the worksheet

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const tableInfo = fWorkbook.getTableInfo('id-1')
console.log('debugger tableInfo', tableInfo)

if (tableInfo) {
  // Remove the table with the specified id
  await fWorksheet.removeTable('id-1')
}
```

- `FWorksheet.setTableRange`: Update the table range in the worksheet

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  // Update the table range to B2:F21 after 3 seconds
  setTimeout(async () => {
    const newRange = fWorksheet.getRange('B2:F21')
    await fWorksheet.setTableRange('id-1', newRange.getRange())

    const tableInfo = fWorkbook.getTableInfo('id-1')
    console.log('debugger tableInfo', tableInfo)
  }, 3000)
}
```

- `FWorksheet.setTableName`: Update the table name in the worksheet

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  // Update the table name after 3 seconds
  setTimeout(async () => {
    await fWorksheet.setTableName('id-1', 'new-name')

    const tableInfo = fWorkbook.getTableInfo('id-1')
    console.log('debugger tableInfo', tableInfo)
  }, 3000)
}
```

### Add Table Theme

- `FWorksheet.addTableTheme`: Add the theme for the table in the worksheet

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  await fWorksheet.addTableTheme('id-1', {
    name: 'table-custom-1',
    headerRowStyle: {
      bg: {
        rgb: '#145f82',
      },
    },
    firstRowStyle: {
      bg: {
        rgb: '#c0e4f5',
      },
    },
  })

  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```
